<template>
  <div class="Allpadding">
      <div class="logo">
          <img src="@/assets/image/logo.png" alt="">     
      </div>
      <p class="font_p">一个账号玩转所有服务</p>
        <div class="loginFrom">
        <van-form @submit="onSubmit" ref='form'>
        <van-field
        v-model="form.phone"
        name="phone"
        placeholder="请输入电话号码"
        :left-icon="'phone-o'"
        :rules="[{ required: true, message: '请填写电话号码' },
         {
                pattern:reg.phone,
                message:'请输入正确的手机号'
        }
        ]"
        />

        <van-field
        v-model="form.password"
        :type="type"
        name="password"
        placeholder="密码"
        :left-icon="'shield-o'"
        :right-icon="type=='password'?'closed-eye':'eye-o'"
        @click-right-icon="changeType"
        :rules="[{ required: true, message: '6-16的数字字母组合' },
        {
            pattern:reg.pwd,message:'请输入6-16的数字字母组合'
        },
        ]"
        />
      <van-field
            v-model="form.captcha"
            name="captcha"
             :left-icon="'smile-comment-o'"
            placeholder="请输入短信验证码"
            :rules="[
            { required: true, message: '请填写验证码' },
            {
                pattern:reg.code,message:'4位验证码'
            }
            ]"
            >
            <template #button>
                <van-button v-if="flag" :disabled="!disabled" size="small" native-type="button" type="primary"  @click.stop="startSendSms" style="background:#fb7299;border:#fb7299;">发送验证码</van-button>
                <van-button v-else disabled size="small" native-type="button" >剩余{{count}}S</van-button>
            </template>
      </van-field>
      <div style="margin: 20px;">
          <van-button  block type="warning" native-type="submit" style="background:#fb7299;">注 册</van-button>
      </div>
      <!-- 返回登录 -->
       <div class="loginBack">
        <p @click="gotoLogin">返回登录</p>
       </div>

      <div class="footer">
            <p>从这里出发，开启新世界，让科技改变生活</p>
      </div>
    </van-form>
</div>
  </div>
</template>

<script>
let timer
export default {
  data() {
    return {
      form:{},
       type:"password",
       flag:true,
       count:120
    };
  },
  computed:{
        disabled(){
            // 检测手机号 
            return this.reg.phone.test(this.form.phone)
        }
    },
  methods: {

    gotoLogin(){
      this.$router.push({
        name:"login"
      })
    },
    //提交
    onSubmit(value) {
        this.$ajax.findUser({
                phone:this.form.phone
            })
            .then(result=>{
                if(!result.length>0){
                    // 验证验证码
                    this.$ajax.checkCaptcha(this.form)
                    .then(res=>{
                        if(res.code==200){
                            // 注册成功，添加数据
                           this.$ajax.register(value)
                            this.$router.push({
                                name:'login'
                            })
                        }else{
                            this.$toast(res.message || "验证码错误")
                        }
                    })
                }else{
                    this.$toast("手机号已被注册，前去登录")
                }
            })
    },
    //查打开眼睛
    changeType(){
    this.type = this.type =='password' ?'text':'password'
    }, 
    timeDown(){
            this.count--;
            this.flag = false;
            timer = setInterval(()=>{
                if(this.count>0){
                    this.count--;
                    this.flag = false;
                }else{
                    clearInterval(timer)
                    timer = null;
                    this.flag = true;
                    this.count = 120;
                }
            },1000)
        },
        sendSms(){
            // 真正的发送验证码
            // 先判断这个用户是否被注册
            this.$ajax.findUser({
                phone:this.form.phone
            })
            .then(res=>{
              console.log(res.length);
                if(!res.length>0){
                    // 发送
                    this.$ajax.getCaptcha({
                         phone:this.form.phone
                    })
                    .then(res=>{
                        if(res.code==200){
                            // 成功
                            this.$toast("验证码发送成功")
                        }else{
                            this.$toast("验证码发送失败")
                        }
                    })
                }else{
                    this.$toast("当前手机号已被注册，请返回登录")
                }
            })
        },
        startSendSms(){
            console.log("发送验证码")
            this.timeDown()
            this.sendSms()
        },
  },
  mounted() {
  },
};
</script>

<style>
.logo{
    margin-top: 10px;
    width: 150px;
    height: 100px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
}
.font_p{
     font-size: 16px;
    text-align: center;
}
.logo img{
    width: 100%;
}
.loginFrom{
    margin-top: 16px;
}
 .van-field__left-icon .van-icon, 
 .van-field__right-icon .van-icon{
  font-size: 30px !important;
  margin-right: 20px;
}
.footer{
    position: absolute;
    bottom:0px;
    width: 100%;
    height: 100px;
    text-align: center;
   
}
.van-button--warning{
  border-radius: 10px;
  font-size: 20px;
}
.loginBack{
  width: 100%;
  font-size: 16px;
  text-align: right;
  padding-right: 10px;
  margin-top: 10px;
  color: #fb7299;
}
</style>